<template>
  <div>
    <van-nav-bar title="账号登录" left-arrow @click-left="onClickLeft" />
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="formData.username"
          name="账号"
          placeholder="请输入账号"
          :rules="[{ required: true, }]"
        />
        <van-field
          v-model="formData.password"
          type="password"
          name="密码"
          placeholder="请输入密码"
          :rules="[{ required: true}]"
        />
        <div style="margin: 16px">
          <van-button block type="info" native-type="submit" v-if="isShow">登录</van-button>
          <van-button loading type="info" loading-text="登录中..." block color="#8cdcae" v-else/>
        </div>
      </van-form>
    </div>
    <div class="target">
      <!-- <a href="/registe">还没有账号，去注册~</a> -->
      <router-link to="/registe">还没有账号，去注册~</router-link>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Toast } from 'vant'
export default {
  data () {
    return {
      formData: {
        username: 'hzhmqd',
        password: '123456'
      },
      isShow: true
      // massage: Toast('用户名格式5-8位数字或字母')
    }
  },
  methods: {
    ...mapActions(['loginApiFn']),
    onClickLeft () {
      // console.log(111)
      this.$router.back()
    },
    async onSubmit () {
      this.isShow = false
      const req = /^[0-9a-zA-Z]{5,8}$/
      if (!req.test(this.formData.username)) {
        return Toast('用户名格式5-8位数字或字母')
      }
      if (!req.test(this.formData.password)) {
        return Toast('密码格式5-8位数字或字母')
      }
      try {
        const res = await this.loginApiFn(this.formData)
        // 登录成功后跳转
        this.$router.push({
          path: '/home/profile'
        })
        Toast(res.data.description)
        this.isShow = true
      } catch (err) {
        console.log(err)
        Toast('账号和密码异常')
      }
    }
  }
}

</script>

<style lang="less" scoped>
  .target{
    width: 100%;
    text-align: center;
    font-size: 14px;
    a{
      color: #666;
    }
  }
  .form{
    padding: 0 8px;
    margin-top: 21px;
  }
.van-cell {
  height: 60px;
  margin-bottom: 9px;
}
/deep/.van-cell__value--alone {
  font-size: 17px;
  padding: 2px, 0;
}
</style>
